import React, { Component } from 'react'
import { Image, StatusBar, Text, View } from 'react-native'
import { pxToDp } from '../../../utils/styleKits'
import { Input } from 'react-native-elements';
import validator from '../../../utils/validator';
import request from '../../../utils/request';
import { ACCOUNT_LOGIN } from '../../../utils/pathMap';
import Thbutton from '../../../components/THbutton/Thbutton';





export default class login extends Component {
    state = {
        phoneNumber: '15176059066',
        phoneVaild: true, //是否符合手机号码
    }
    // 输入框修改回调
    changePhoneNum = (phoneNumber) => {
        this.setState({ phoneNumber })
    }
    // 获取验证码了
    handleGetVCode = () => {
        console.log('点击获取验证码了');
    }
    // 输入号码 点击完成
    phoneNumberSubmitEditing = async () => {
        console.log('手机号码点击完成');
        /**
         * 1. 正则校验
         * 2. 将手机号码发送后台 -》 获取验证码
         * 3. 跳转到验证码页面
         */
        const { phoneNumber } = this.state
        const phoneVaild = validator.validatePhone(phoneNumber)
        if (!phoneVaild) {
            // 没有通过
            this.setState({ phoneVaild })
            return;
        }
        let res = await request.post(ACCOUNT_LOGIN, { phone: phoneNumber })
        console.log(res);
    }
    render() {
        const { phoneNumber, phoneVaild } = this.state
        return (
            <View>
                {/* <Button type="primary">Button</Button> */}
                {/* 将标题栏改为透明,内容占满  translucent={true}*/}
                <StatusBar backgroundColor='transparent' translucent={true} />
                {/* 背景图片 */}
                <Image style={{ width: '100%', height: pxToDp(220) }} source={require('../../../res/profileBackground.jpg')} />
                <View style={{ padding: pxToDp(20) }}>
                    <View>
                        <Text style={{ fontSize: pxToDp(25), color: "#888", fontWeight: 'bold' }}>
                            手机号登陆注册
                        </Text>
                    </View>
                    {/* 输入框 */}
                    <View style={{ marginTop: pxToDp(30) }}>
                        <Input
                            placeholder='请输入手机号码'
                            maxLength={11} //最大长度
                            keyboardType="phone-pad" //数字
                            value={phoneNumber}
                            inputStyle={{ color: '#333' }}
                            onChangeText={this.changePhoneNum}
                            errorMessage={phoneVaild ? '' : '手机号码格式不正确'}
                            onSubmitEditing={this.phoneNumberSubmitEditing}
                            leftIcon={{ type: 'font-awesome', name: 'phone', size: pxToDp(20), color: '#ccc' }}
                        />
                    </View>
                    <View style={{ width: '85%', height: pxToDp(50), marginTop: pxToDp(10), alignSelf: 'center', borderRadius: pxToDp(90), overflow: 'hidden' }}>
                        <Thbutton onPress={this.handleGetVCode}>获取验证码</Thbutton>
                    </View>
                </View>
            </View>
        )
    }
}